<!--这是旗下客户组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox"  style="">
			<h3 class="fixTitle"><span>旗下客户</span>
				<p>
					<!-- <em style="cursor: pointer;" ><svg-icon icon-class="jian" class="font-size16"/></em><em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em> -->
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div style="margin:40px 0 0;padding:0 20px;height:386px;overflow-y:scroll;">
				<div style="">
          <div>
					  <span class="number" v-if="customerData.vipType >= 3 && customerData.vipType != 4">直接客户数：<b style="color:red">{{customerData.num.directNum}}</b></span>
					  <span class="number" v-if="customerData.vipType >= 3 && customerData.vipType != 4">间接客户数：<b style="color:red">{{customerData.num.indirectNum}}</b></span>
          </div>
          <div class="c-width100">
            <span class="number">普通客户数：<b style="color:red">{{customerData.num.normalNum}}</b></span>
            <span class="number">vip客户数：<b style="color:red">{{customerData.num.vipNum}}</b></span>
            <span class="number">svip客户数：<b style="color:red">{{customerData.num.svipNum}}</b></span>
            <el-button size="small" @click="handleDownload" style="margin-bottom: 10px;">导出Excel</el-button>
          </div>
				</div>
				<table v-loading="listLoading" element-loading-text="加载中...">
					<tr>
						<th>会员昵称</th>
						<th>手机号</th>
						<th>身份</th>
						<th v-if="customerData.vipType >= 3 && customerData.vipType != 4">直接关系</th>
					</tr>
					<tr v-for="item in customerData.members.data" :key="item.id">
						<td style="text-align:left;padding: 10px 0;">
							<img :src="item.headimgurl" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;margin-left:20px;">
							{{item.nickname}}
						</td>
						<td>{{item.mobile}}</td>
						<td>
							<span v-if="item.vipType == 1">普通会员</span>
							<span v-if="item.vipType == 2">vip</span>
							<span v-if="item.vipType == 3">代理商</span>
							<span v-if="item.vipType == 4">svip</span>
							<span v-if="item.vipType == 5">合伙人</span>
              <span v-if="item.vipType == 6">分公司</span>
						</td>
						<td v-if="customerData.vipType >= 3 && customerData.vipType != 4">{{item.relation}}</td>
					</tr>
				</table>
			</div>
      <div class="block text-c pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="customerData.members.total">
        </el-pagination>
      </div>
		</div>
	</div>
</template>
<script>
  import { myCustomers } from '@/api/member'
  export default {
    data() {
      return {
        listQuery: {
          currentPage: 1,
          page: 1,
          limit: 10
        },
        listLoading: false,
        companyId: null,
        URLAPI: process.env.BASE_API
      }
    },
    props: ['customerData'],
    methods: {
      close() {
        this.$emit('hideCustomers', false)
      },
      getList() {
        this.listLoading = true
        var data = {
          userId: this.customerData.userId,
          vipType: this.customerData.vipType,
          currentPage: this.listQuery.currentPage,
          page: this.listQuery.page,
          limit: this.listQuery.limit
        }
        myCustomers(data).then(res => {
          this.customerData = res.data.data
          this.listLoading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleDownload() {
        var form = '&userId=' + this.customerData.userId + '&vipType=' + this.customerData.vipType
        window.open(this.URLAPI + '/excel/excelMyCust?companyId=' + this.customerData.companyId + form)
      }
    }
  }
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
  .number {
    display: inline-block;
    width: 24%;
    height: 37px;
    text-align: center;
    line-height: 37px;
  }
	h3 em{
		padding: 0 10px;
		font-style: normal;
	}
	.fixTitle{
    width: 800px;
    padding: 0 10px;
	}
	.addBox {
    position: relative;
		width: 800px;
		height: 500px;
		background: #fff;
		position: fixed;
		left: 25%;
		top: 15%;
		z-index: 101;
		font-size: 14px;
	}
	table{
		width: 100%;
		border: 1px solid #eee;
		border-spacing: 0;
		border-collapse: collapse;
		font-size: 12px;
	}
	td,th{
		border: 1px solid #eee;
		line-height: 36px;
		text-align: center;
	}
	.leftTd{
		width: 30%;
	}
	.rightTd{
		width: 70%;
	}
  .pagination {
    position: absolute;
    left: 15%;
    bottom: 10px;
  }
</style>
